<template>
	<div class="lm-chatgpt-item">
		<chatgpt-item-header v-if="!isChat" :text="'正在为您生成结果：' + item.message.title"></chatgpt-item-header>
		<div class="chatgpt-item-content">
			<div class="item-section-title">{{item.message.title}}</div>
			<div class="img-wrap" @click="openIframe">
				<img v-if="item.message.bizType === '1' || item.message.bizType === '4'" :src="ProposalImg" class="img"/>
				<img v-else :src="PolicyImg" class="img"/>
				<span class="remark" :class="{proposal: item.message.bizType === '1' || item.message.bizType === '4'}">{{item.message.content}}</span>
			</div>
			<div v-if="!isChat" class="bottom-ope">
				<h-button v-if="item.message.bizType == '3'" type="info" @click="getAdviceInstruction('13')">生成保障检视视频报告</h-button>
				<h-button v-else-if="item.message.bizType == '4'" type="info" @click="getAdviceInstruction('14')">生成建议书视频报告</h-button>
				<h-button v-else type="info" @click="postMessage" class="btn">转发</h-button>
			</div>
		</div>
		<h-msg-box v-model="showModal" width="375" title="" :mask-closable="true" :footerHide="true">
			<iframe
				ref="iframe"
				frameborder="0"
				:src="iframeUrl"></iframe>
		</h-msg-box>
	</div>
</template>

<script>
import ChatgptItemHeader from './chatgpt-item-header'
import ProposalImg from '@/assets/images/proposal.png'
import PolicyImg from '@/assets/images/policy.png'
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'PageCardItem',
	props: {
		item: Object,
		isChat: {
			type: Boolean,
			default: false
		}
	},
	components: {
		ChatgptItemHeader
	},
	data() {
		return {
			showModal: false,
			iframeUrl: '',
			ProposalImg,
			PolicyImg,
			type: 1
		}
	},
	computed: {
	},
	methods: {
		...mapActions('lm-chat', ['postMsg', 'postGptMsg']),
		// 发送
		postMessage() {
			this.postMsg({
				msg_side: "1",
				aicc_msg_type: "pageUrl",
				aicc_msg_content: {...this.item.message}
			})
		},
		// 获取建议(代理人大模型对话发送消息接口)
		getAdviceInstruction(instruction_id) {
			let params = {
				instruction_id: instruction_id,
				instruction_name: instruction_id === '13' ? '生成保障检视视频报告' : '生成建议书视频报告'
			}
			this.postGptMsg(params)
		},
		// 打开iframe页面
		openIframe() {
			this.iframeUrl = this.item.message.url
			this.showModal = true
		}
	}
}
</script>

<style lang="scss" scoped>
.lm-chatgpt-item{
	display: inline-block;
	width: 278px;
	.chatgpt-item-content{
		.item-section-title{
			margin-bottom: 12px;
		}
		.img-wrap{
			position: relative;
			text-align: center;
			cursor: pointer;
			.img{
				width: 238px;
			}
			.remark{
				position: absolute;
				font-size: 20px;
				font-weight: bold;
				color: #4686F2;
				top: 34px;
				left: 0px;
				width: 100%;
				&.proposal{
					color: #940C12;
				}
			}
		}
		.bottom-ope{
			text-align: right;
			margin-top: 16px;
			.btn{
				border-radius: 4px;
			}
		}
	}
}
/deep/ .h-modal-body{
	padding: 30px 0 0;
	.h-modal-close{
		top: 5px;
		right: 10px;
	}
	iframe{
		width: 100%;
		height: 637px;
	}
}
</style>